<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 字符编码声明：UTF-8支持全球多语言字符，确保文本正常显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 响应式配置：页面宽度适配设备，初始缩放比1:1，避免移动端变形 -->
    <title>HTML5语义标签示例</title>
    <style>
        /* 基础样式：统一页面默认样式，消除浏览器差异 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f9f9f9;
        }

        /* 头部样式：页面顶部区域，包含标题和副标题 */
        header {
            background-color: #2c3e50;
            color: white;
            padding: 1rem;
            text-align: center;
        }

        /* 导航样式：页面导航区域，横向排列链接 */
        nav {
            background-color: #34495e;
            padding: 0.5rem;
        }

        nav ul {
            list-style: none;
            display: flex;
            gap: 1rem;
            justify-content: center;
        }

        nav a {
            color: white;
            text-decoration: none;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            transition: background-color 0.3s; /*  hover过渡效果，提升交互体验 */
        }

        nav a:hover {
            background-color: #2c3e50;
        }

        /* 主体容器：控制主内容与侧边栏的布局 */
        .container {
            display: flex;
            max-width: 1200px;
            margin: 2rem auto;
            gap: 2rem;
            padding: 0 1rem;
        }

        /* 主内容区域：页面核心内容，优先级最高 */
        main {
            flex: 3; /* 占比3份，与侧边栏形成3:1布局 */
        }

        /* 文章容器：独立完整的内容单元，如博客、新闻 */
        article {
            background-color: white;
            padding: 1.5rem;
            margin-bottom: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        /* 侧边栏：辅助内容区域，与主内容相关但非核心 */
        aside {
            flex: 1; /* 占比1份，与主内容形成3:1布局 */
            background-color: white;
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        /* 章节容器：文档中的逻辑分段，包含独立小标题 */
        section {
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #eee;
        }

        /* 标题样式：统一标题颜色和层级区分 */
        h1 {
            font-size: 1.8rem;
            margin-bottom: 0.5rem;
        }

        h2, h3 {
            color: #2c3e50;
            margin-bottom: 1rem;
        }

        h2 {
            font-size: 1.5rem;
            border-bottom: 2px solid #34495e;
            padding-bottom: 0.5rem;
        }

        h3 {
            font-size: 1.2rem;
        }

        /* 列表样式：优化列表项间距，提升可读性 */
        ul {
            list-style-position: inside;
            margin-left: 1rem;
            line-height: 1.8;
        }

        /* 媒体容器：包裹图片及标题，确保语义关联 */
        figure {
            margin: 1.5rem 0;
        }

        figure img {
            width: 100%;
            border-radius: 4px;
            margin-bottom: 0.5rem;
        }

        figcaption {
            text-align: center;
            color: #666;
            font-size: 0.9rem;
        }

        /* 页脚样式：页面底部区域，包含版权和联系方式 */
        footer {
            background-color: #2c3e50;
            color: white;
            text-align: center;
            padding: 1rem;
            margin-top: 2rem;
        }

        footer p {
            margin: 0.3rem 0;
        }

        /* 响应式适配：屏幕≤768px时，布局改为垂直排列 */
        @media (max-width: 768px) {
            .container {
                flex-direction: column; /* 主内容与侧边栏垂直排列 */
            }

            nav ul {
                flex-direction: column; /* 导航链接垂直排列 */
                text-align: center;
                gap: 0.5rem;
            }

            nav a {
                display: block; /* 导航链接占满父容器，便于点击 */
            }
        }
    </style>
</head>
<body>
    <!-- header：页面头部，包含网站标题、副标题等全局信息 -->
    <header>
        <h1>网站标题</h1>
        <p>网站副标题：展示HTML5语义标签的应用</p>
    </header>

    <!-- nav：导航区域，提供页面内/跨页面的跳转链接 -->
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">文章</a></li>
            <li><a href="#">分类</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>

    <!-- container：布局容器，包裹主内容与侧边栏，控制整体排版 -->
    <div class="container">
        <!-- main：页面核心内容，一个文档仅一个main，优先级最高 -->
        <main>
            <!-- article：独立完整的内容单元，可单独存在（如单篇博客） -->
            <article>
                <h2>HTML5语义化标签介绍</h2>

                <!-- section：文档内的逻辑分段，围绕一个主题展开，需搭配标题 -->
                <section>
                    <h3>什么是语义化标签？</h3>
                    <p>语义化标签是指能清晰描述内容含义的HTML标签。HTML5引入此类标签，替代了无意义的div，让网页结构更直观，同时帮助浏览器、搜索引擎和开发者理解内容逻辑。</p>
                </section>

                <section>
                    <h3>语义化标签的优势</h3>
                    <ul>
                        <li>提高代码可读性，降低后期维护成本</li>
                        <li>优化SEO，帮助搜索引擎抓取核心内容</li>
                        <li>改善无障碍访问，方便屏幕阅读器解析页面结构</li>
                        <li>减少冗余代码，避免过度使用div嵌套</li>
                    </ul>
                </section>

                <section>
                    <h3>常用的HTML5语义标签</h3>
                    <p>核心语义标签包括header（头部）、nav（导航）、main（主内容）、article（独立内容）、section（章节）、aside（辅助内容）、footer（页脚），需根据内容性质选择使用。</p>
                </section>
            </article>

            <!-- 第二篇article：另一篇独立完整的内容，与上篇主题相关但独立 -->
            <article>
                <h2>如何正确使用语义标签</h2>
                <section>
                    <h3>遵循标签的语义含义</h3>
                    <p>语义标签的核心是“含义优先”，例如用header包裹页面顶部信息，而非仅为了设置顶部样式；用article包裹单篇文章，而非普通文本块。</p>
                </section>

                <section>
                    <h3>保持适当的嵌套结构</h3>
                    <p>允许合理嵌套（如header内包含nav、article内包含section），但需避免错误嵌套（如将main嵌套在article内，或用section替代div做纯样式布局）。</p>
                </section>
            </article>
        </main>

        <!-- aside：辅助内容区域，内容与主内容相关但非核心（如侧边栏、推荐） -->
        <aside>
            <h3>相关资源</h3>
            <!-- figure+figcaption：包裹媒体内容（图片/视频）及标题，语义上绑定两者 -->
            <figure>
                <img src="https://picsum.photos/300/200?random=1" alt="HTML5语义标签结构图示：展示header、nav、main、aside、footer的位置关系">
                <figcaption>HTML5语义化结构示意图</figcaption>
            </figure>

            <h3>热门文章</h3>
            <ul>
                <li><a href="#">HTML5新特性详解</a></li>
                <li><a href="#">CSS3布局技巧</a></li>
                <li><a href="#">响应式设计最佳实践</a></li>
                <li><a href="#">前端性能优化指南</a></li>
            </ul>

            <h3>关于作者</h3>
            <p>资深前端开发者，专注于Web标准和最佳实践，拥有10年Web开发经验，擅长语义化开发与响应式布局。</p>
        </aside>
    </div>

    <!-- footer：页面底部，包含版权、联系方式等全局辅助信息 -->
    <footer>
        <p>&copy; 2023 HTML5语义标签演示网站 - 保留所有权利</p>
        <p>联系方式：contact@example.com</p>
    </footer>
</body>
</html>